<template>
  <div class="home">
    <header @click="$router.push('/about')">
      <input type="text" disabled placeholder="商品搜索" />
    </header>
  </div>
</template>

<script>
// @ is an alias to /src
import { getCurrentInstance } from "vue";
export default {
  name: "Home",
  components: {},
  setup(props) {
    // setup 没有了this
    const { ctx } = getCurrentInstance(); //  方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到

    const { proxy } = getCurrentInstance(); //  方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
    proxy.$Test();
    // const obj = getCurrentInstance();
    // console.log(obj);
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  background: #e9e9e9;
}
header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  input {
    border: none;
    width: 70%;
    height: 40px;
    padding: 0 10px;
    background: #e9e9e9;
    border-radius: 20px;
    outline: none;
  }
}
</style>
